<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>编辑相册</title>
        
        <script src="./Public/frozenui/js/lib/zeptojs/zepto.min.js"></script>
        <script src="./Public/frozenui/js/frozen.js"></script>

        <link rel="stylesheet" href="./Public/Kmic/css/index.css">
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>  
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    <body>
        
        <div class="alert_box">
            <div class=" active col-xs-10 col-xs-offset-1">
            <div class="progress progress-striped m0">
                    <div class="progress-bar progress-bar-success " role="progressbar"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 60%;">
                    </div>
            </div>
            </div>
        </div>
        <div id="bg"></div>
        
        <div class="col-xs-12 ptm20">
            <div class="web_title"><span class="bl2px"></span> 编辑相册</div>
                <div class="ui-border-b file" >
                     <ul class="pics">
                            <li class="add col-xs-3">
                                <input id="file" type="file" accept="image/*" />
                                
                            </li>             
                        </ul>                                    
                </div>
        </div>
        <div  class="col-xs-12 col999 mb10"><div class="zhuyi">!</div>上传过程持续一段时间，请耐心等待。</div>
        <div class="clearfix"></div>
        <div class="col-xs-12">
            <div class="button_wbut text-center msg_subtim" onclick="alert('编辑成功！')">提交</div>
        </div>
        <script src="./Public/localResizeIMG/dist/lrz.bundle.js"></script>
        <script>
    
            var picNum = 0;
            var videoNum = 0;
            document.querySelector('#file').addEventListener('change', function () {
            $('.alert_box').css("display","block");
            $('#bg').css("display","block");
            lrz(this.files[0],{width: 700})
                   .then(function (rst) {
                       // 处理成功会执行
//                       console.log(rst);
                        var xhr = new XMLHttpRequest();
                        var data = {
                            openid:'{$Think.get.openid}',
                            base64: rst.base64,
                            size: rst.base64.length // 校验用，防止未完整接收
                        };
                        xhr.open('POST', '?m=web&a=profiles&upload');
                        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                        xhr.onreadystatechange = function () {
//                            console.log(xhr.status);
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                $('.alert_box').css("display","none");
                                $('#bg').css("display","none"); 
                                var result = JSON.parse(xhr.response);
                                if (result.error == 0) {
                                    $(".pics").prepend('<li id="'+picNum+'"><div class="delete" onclick="deletePic(\''+result.url+'\','+picNum+')"><img src="./Public/Kmic/picDelete.png" /></div><img src="'+result.url+'" width="103"/></li>');
                                    picNum++;
                                    $('.show').fadeOut();
                                }
                            }
                            if (picNum >= 9) {
                                $('.add').css('display','none');
                            }else if (picNum >= 6) {
                                $('.file').css('height','420px');
                            }else if (picNum >= 3) {
                                $('.file').css('height','300px');
                            }
                        };
                        xhr.send(JSON.stringify(data)); // 发送base64
//                        });
                   })
                   .catch(function (err) {
                       // 处理失败会执行
                       $('.show').fadeOut();
                       console.log(rst);
                   })
                   .always(function () {
                       // 不管是成功失败，都会执行
                       
                   });
           });
           
    {$jsPics}
    
            function deletePic(pic,num){
                if(confirm("确定要删除数据吗？"))
                {
                    
                }else{
                    return;
                }
                $('#'+num).remove();
                $('.add').css('display','block');
                $.ajax({
                    cache: true,
                    type: "POST",
                    url:"?m=web&a=profiles",
                    data:{'delete':pic},// 序列号formid
                    dataType: 'json',
                    error: function(request) {
                        
                    },
                    success: function(data) {
                        console.log(data);
                    }
                });
            }    
        </script>
    </body>
</html>

